<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      padding: 0;
      margin: 0;
    }
    .box{
      position: relative;
      width: 1000px;
      height: 600px;
      margin: 50px auto;
    }
    #bannerUl li{
      position: absolute;
      bottom: 0;
      left: 0;
      width: 1000px;
      height: 600px;
      background-repeat: no-repeat;
      background-size: 1000px 600px;
      list-style-type: none;
    }
    .btn{
      width: 100px;
      margin: 0 auto;
    }
    .btn button{
      padding: 10px 20px;
    }
  </style>
  <script src="jquery-3.4.1.min.js"></script>
</head>
<body>
  <div class="box">
    <ul id="bannerUl">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
  <div class="btn">
    <button>下一张</button>
  </div>

  <script>
    $lis = $("#bannerUl li");
    $btn = $(".btn button");

    var arr = ["01.jpg","02.jpg", "03.jpg", "04.jpg"];
    console.log($lis)

    $lis.each(function(i){

      var $url = "url(" + "name" + arr[i] + ")";
      $(this).css("background-image", $url)

    })

    var idx = 3;
    $btn.click(function(){
      $lis.eq(idx).slideUp();
      idx--;
      if(idx < 0){
        idx = 3;
      }
      $lis.eq(idx).slideDown();
    })

  </script>
</body>
</html>